<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org">
<head>
<title>首页</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
.btn:focus,.btn:active:focus,.btn.active:focus,.btn.focus,.btn:active.focus,.btn.active.focus {
	outline: none;
	border-color: transparent;
	box-shadow:none;
}
</style>
</head>
<body>
<div    id="content">
	<section class="content-header">
		<h1>
			<i class="fa fa-dashboard"></i>
			<strong th:text="${module.moduleName}"></strong>
		</h1>
		<ol class="breadcrumb">
			<li><a href="#"><i class="fa fa-home "></i>Home</a></li>
			<li th:text="${module.moduleName}"></li>
		</ol>
	</section>
	<!-- Main content -->
	<section class="content">
		<div class="row">
			<div class="col-md-2">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>区域</strong></h3>
					</div>
					<div class="ztree-wrap">
						<ul id="hierarchyTree" class="ztree"></ul>
					</div>
				</div>
			</div>
			<div class="col-md-10">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>网格</strong></h3>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="searchGrid"  placeholder="Search..."/>
									   <span class="input-group-btn">
											<button type="button" name="search" class="btn btn-info searchBtnGrid">查询</button>
									   		<button type="button" name="reset" id="reset" class="btn btn-info resetBtnGrid">撤消</button>
									   </span>
							</div>
						</div>
					</div>
					<div class="box-body">
						<table  id="dataTableGrid" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
								<tr>
									<th width="12%" >序号</th>
									<th width="20%" >网格名称</th>
									<th width="20%" >所属区域</th>
									<th width="15%" >面积</th>
									<th width="18%" >类型</th>
									<th width="15%" >状态</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="modal-body">
						<div class="form-horizontal">
							<div class="form-group">
								<label class="col-sm-1 control-label">时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<select class="form-control" id="cyc" style="width: 100%;">
											<option value="week">当周</option>
											<option value="month">当月</option>
											<option value="year">当年</option>
											<option value="custom">自定义周期</option>
										</select>
									</div>
								</div>
							</div>
							<div class="form-group" id="cycDate" style="display: none;">
								<label class="col-sm-1 control-label">开始时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<input type="date" class="form-control" id="beginDate" style="width: 100%;"/>
									</div>
								</div>
								<label class="col-sm-1 control-label">结束时间</label>
								<div class="col-sm-2">
									<div class="col-md-10">
										<input type="date" class="form-control" id="endDate" style="width: 100%;"/>
									</div>
								</div>
								<div class="col-md-1">
									<button type="button" class="btn btn-primary cycBtn" >确定</button>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-4">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>评分层级</strong></h3>
					</div>
					<div class="box-body">
						<div id="funnel" style="width: 100%;height:650px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				<div class="box box-info" >
					<div class="box-header with-border">
						<h3 class="box-title"><i class="fa fa-cubes "></i><strong>数据分析</strong></h3>
					</div>
					<div class="box-body">
						<div id="userBar" style="width: 100%;height:650px;"></div>
					</div>
				</div>
			</div>
		</div>
		<div class="row">
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">部件数据分析展示</h4>
					</div>
					<div class="box-body">
						<div id="pie1" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
			<div class="col-md-6">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">事件数据分析展示</h4>
					</div>
					<div class="box-body">
						<div id="pie2" style="width: 100%;height:400px;"></div>
					</div>
				</div>
			</div>
		</div>
				<div class="row">
			<div class="col-md-12">
				<div class="box box-info">
					<div class="box-header with-border">
						<i class="fa fa-th-list"></i>
						<h4 class="box-title">详情</h4>
					</div>
					<div class="box-body">
						<div class="form-inline">
							<div class="input-group">
								<input type="text" class="form-control" id="search2"  placeholder="Search..."/>
								<span class="input-group-btn">
									<button type="button" name="search" class="btn btn-info searchBtn2">查询</button>
									<button type="button" name="reset" id="reset" class="btn btn-info resetBtn2">撤消</button>
								</span>
							</div>
						</div>
					</div>
					<div class="box-body">
						<table  id="dataTable2" class="mytable display table-bordered text-center" cellspacing="0" width="100%">
							<thead>
							<tr>
								<th width="8%" >序号</th>
								<th width="5%" >操作</th>
								<th width="10%" >登记名称</th>
								<th width="10%" >事件类型</th>
								<th width="10%" >发生时间</th>
								<th width="10%" >主管部门</th>
								<th width="10%" >所属网格</th>
								<th width="10%" >所属区域</th>
								<th width="8%" >部件</th>
								<th width="10%" >评分层级</th>
								<th width="9%" >扣分</th>
							</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
			</div>
		</div>
	</section>
	
	<script th:src="@{/analysis/towerAnalysis.js}"></script>


</div>

</body>
</html>